<div class="subnav">
    <ul class="crumbs">
        <li>我的位置：</li>
        <li>餐饮空间  </li>
        <li>＞ <a href="{$site_url}">首页</a> </li>
        <li>＞ <a href="{$Categorys[$catid]['url']}">{$Categorys[$catid]['catname']}</a> </li>
        <div class="clear"></div>
    </ul>
 
</div>
<style>
.page_main{ width:100%;}
.nvam{  width:450px; height:50px;  margin:0 auto; margin-top:30px;}
.nvam ul{ float:left;  width:150px; font-size:20px; font-weight:bold}
.nvam ul #on{ color:#fff; width:80px;text-align:center; height:40px;  margin:0 auto; line-height:40px;border-radius: 6px;}
.aaa{color:#FFF;background: #604328;width:80px;text-align:center; height:40px;  margin:0 auto; line-height:40px;border-radius: 6px;}
.nvam ul .aaa a{ color:#FFF; }
.qiehuan{width:778px;margin-left:auto; margin-right:auto;}

.cat{ width:778px; height:50px; margin-top:20px; line-height:50px; margin-left:auto; margin-right:auto; background:#eeeeee;border-radius: 6px;cursor:pointer;}
.cat span{ float:left; margin-left:40px; font-size:12px; font-weight:bold}
.bbb{cursor:pointer;}
</style>
<div class="main">
 <div class="page_main">
         <h1><a href="#">{$Categorys[$catid]['catname']}</a></h1>
         <div class="nvam" id="tits">
                 <YP:subcat  catid="22" key="k"><ul><li id="on" ><a  href="javascript:title_q({$k})">{$r.catname}</a></li></ul>
                 </YP:subcat> 
             </div>
             <div class="qiehuan" id="con_1" style="display:none">
             <YP:subcat  catid="25" key="k">
             
                 <div class="cat" id="cat{$r.id}" onclick="content_q({$k})" >
                   <li class="bbb" ><span> {$r.catname}</span>
                  <img  id="content_img{$k}" style=" float:right; margin-right:40px; margin-top:15px;{if $k!=1} display:none {/if}" src="../Public/images/xiangxia.png"/>
                  <img  id="content_img2{$k}" style=" float:right; margin-right:40px; margin-top:15px;{if $k==1}display:none  {/if}" src="../Public/images/xiangxia2.png"/>
                  </li>
                  </div>
                 <?php $reluts=M('page')->where("id=".$r['id'])->find(); ?>
                  <div class="content" id="content{$k}" {if $k!=1} style="display:none" {/if} >{$reluts.content}</div>
             </YP:subcat>
             </div> 
             
             
             <div class="qiehuan" id="con_2" style="display:none" >
             <YP:subcat  catid="26" key="k">
             
                  <div class="cat" id="cat{$r.id}"  onclick="content_w({$k})">
                   <li class="bbb" > <span> {$r.catname}</span>
                  <img  id="content_wimg{$k}" style=" float:right; margin-right:40px; margin-top:15px;{if $k!=1} display:none {/if}" src="../Public/images/xiangxia.png"/>
                  <img  id="content_wimg2{$k}" style=" float:right; margin-right:40px; margin-top:15px;{if $k==1}display:none  {/if}" src="../Public/images/xiangxia2.png"/>
                  </li>
                  </div>
                 <?php $reluts=M('page')->where("id=".$r['id'])->find(); ?>
                  <div class="content{$k}" id="content_w{$k}" {if $k!=1} style="display:none" {/if}  >{$reluts.content}</div>
             </YP:subcat>
             </div>
             
             <div class="qiehuan" id="con_3" style="display:none" onclick="content_q({$k})">
             <YP:subcat  catid="37" key="k">
             
                  <div class="cat" id="cat{$r.id}"  onclick="content_e({$k})">
                   <li class="bbb" ><span> {$r.catname}</span>
                       <img  id="content_eimg{$k}" style=" float:right; margin-right:40px; margin-top:15px;{if $k!=1} display:none {/if}" src="../Public/images/xiangxia.png"/>
                      <img  id="content_eimg2{$k}" style=" float:right; margin-right:40px; margin-top:15px;{if $k==1}display:none  {/if}" src="../Public/images/xiangxia2.png"/>
                  </li>
                  </div>
                 <?php $reluts=M('page')->where("id=".$r['id'])->find(); ?>
                  <div class="content{$k}"  id="content_e{$k}" {if $k!=1} style="display:none" {/if} >{$reluts.content}</div>
             </YP:subcat>
             </div>
             
             
 </div>
</div> 
            
  <script type="text/javascript">
  
  function  title_q(n){
	  tli=document.getElementById('tits').getElementsByTagName("li");
  for(i=0;i<tli.length;i++){
    k=i+1
    if (k==n){
      tli[i].className="aaa";
      document.getElementById('con_'+k).style.display="";
    }else{
      tli[i].className="";
      document.getElementById('con_'+k).style.display="none";
    }
  }
}
  
  function  content_q(n){
	  tli=document.getElementById('con_1').getElementsByTagName("li");
	  
  for(i=0;i<tli.length;i++){
    k=i+1
    if (k==n){
		var nnn=document.getElementById('content'+k).style.display;
		if(nnn=='none'){
		  document.getElementById('content'+k).style.display="";
		  document.getElementById('content_img'+k).style.display="";
		  document.getElementById('content_img2'+k).style.display="none";
		}else{
		  document.getElementById('content'+k).style.display="none";
		  document.getElementById('content_img'+k).style.display="none";
		  document.getElementById('content_img2'+k).style.display="";
			}
	}else{
      tli[i].className="";
      document.getElementById('content'+k).style.display="none";
	  document.getElementById('content_img'+k).style.display="none";
	  document.getElementById('content_img2'+k).style.display="";
    }
  }
}

 function  content_w(n){
	  tli=document.getElementById('con_2').getElementsByTagName("li");
	 // alert(tli.length);
  for(i=0;i<tli.length;i++){
    k=i+1
    if (k==n){
		var nnw=document.getElementById('content_w'+k).style.display;
		if(nnw=='none'){
		  document.getElementById('content_w'+k).style.display="";
		  document.getElementById('content_wimg'+k).style.display="";
		  document.getElementById('content_wimg2'+k).style.display="none";
		}else{
		  document.getElementById('content_w'+k).style.display="none";
		  document.getElementById('content_wimg'+k).style.display="none";
		  document.getElementById('content_wimg2'+k).style.display="";

			}
    }else{
      tli[i].className="";
      document.getElementById('content_w'+k).style.display="none";
	  document.getElementById('content_wimg'+k).style.display="none";
	  document.getElementById('content_wimg2'+k).style.display="";
    }
  }
}

 function  content_e(n){
	  tli=document.getElementById('con_3').getElementsByTagName("li");
	  
  for(i=0;i<tli.length;i++){
    k=i+1
    if (k==n){
		var nne=document.getElementById('content_e'+k).style.display;
		if(nne=='none'){
		
		  document.getElementById('content_e'+k).style.display="";
		  document.getElementById('content_eimg'+k).style.display="";
		  document.getElementById('content_eimg2'+k).style.display="none";
		}else{
		  document.getElementById('content_e'+k).style.display="none";
		  document.getElementById('content_eimg'+k).style.display="none";
		  document.getElementById('content_eimg2'+k).style.display="";
			}
    }else{
      tli[i].className="";
      document.getElementById('content_e'+k).style.display="none";
	  document.getElementById('content_eimg'+k).style.display="none";
	  document.getElementById('content_eimg2'+k).style.display="";
    }
  }
}

  
  $(document).ready(function(){
        title_q('1');
        //content_q('1');
		//content_w('1');
		//content_e('1');

    })
  </script>                                                                                                                                                 